:host {
    --border-width: 1px;
}

section {
    height: 100%;
    margin: 0 15px;
    padding-top: 10px;
    position: relative;
    .meter-title {
        font-size: 15px;
        height: 40px;
        line-height: 40px;
        position: relative;
        &::before {
            content: ' ';
            display: block;
            width: 2px;
            height: 35%;
            top: 50%;
            left: -6px;
            position: absolute;
            margin-right: 20px;
            background: #00b5ff;
            transform: translateY(-50%);
        }
    }
    .isChildSensor {
        margin-top: 20px;
        padding-left: 10px;
        height: 40px;
        position: relative;
        display: flex;
        border: 1px solid #d3d3d3;
        align-items: center;
    }
    .isPIOM {
        padding-left: 10px;
        position: relative;
        align-items: center;
        .meter-obj {
            margin-top: 20px;
            &:first-child {
                margin: 0;
            }
            .meter-name {
                font-size: 16px;
                padding: 10px;
                span {
                    margin-left: 10px;
                }
            }
            .meter-status {
                display: flex;
                flex-wrap: wrap;
                span {
                    margin-left: 30px;
                    &.more {
                        flex: 0 0 20%;
                        margin: 0;
                    }
                    &:first-child {
                        margin: 0;
                    }
                    ion-checkbox {
                        width: 15px;
                        height: 15px;
                        vertical-align: sub;
                        --border-width: 1px;
                        --background-checked: #00b5ff;
                        --border-color-checked: #00b5ff;
                        --border-color: #ddd;
                        button {
                            color: #f00;
                        }
                    }
                    i {
                        font-style: normal;
                        font-size: 12px;
                        margin-left: 5px;
                    }
                }
            }
        }
    }
    .meter-share {
        .share-title {
            font-size: 15px;
            height: 40px;
            line-height: 40px;
            position: relative;
            &::before {
                content: ' ';
                display: block;
                width: 2px;
                height: 35%;
                top: 50%;
                left: -6px;
                position: absolute;
                margin-right: 20px;
                background: #00b5ff;
                transform: translateY(-50%);
            }
        }
        .share-box {
            display: flex;
            flex-wrap: wrap;
            button {
                width: 90px;
                height: 40px;
                outline: none;
                border: 1px solid #ddd;
                border-radius: 5px;
                background: transparent;
                position: relative;
                flex: 0 0 20%;
                margin: 10px 0 0 10px;
                &.active {
                    color: #00b5ff;
                    border-color: #00b5ff;
                }
                ion-icon {
                    width: 15px;
                    color: #00b5ff;
                    position: absolute;
                    left: 5px;
                }
                &.handle {
                    ion-icon {
                        left: 0px;
                    }
                }
            }
        }
    }
    &>button {
        bottom: 20px;
        width: 100%;
        padding: 15px;
        border-radius: 5px;
        font-size: 16px;
        background: #00b5ff;
        color: #fff;
        position: absolute;
    }
}